<template>
  <div class="container">
    <Category title="美食">
      <img slot="center" src="./assets/Todo-list.png">
      <a slot="footer" href="">美食推荐</a>
    </Category>

    <Category title="游戏">
      <ul slot="center">
        <li v-for="(item,index) in games" :key="index">{{item}}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="">单机游戏</a>
        <a href="">网络游戏</a>
      </div>
    </Category>

    <Category title="电影">
      <video slot="center" controls src="./assets/1.mp4"></video>
      <template v-slot:footer>
        <div class="foot">
          <a href="">经典</a>
          <a href="">热门</a>
          <a href="">推荐</a>
        </div>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from '@/components/Count'
  // 创建App组件

  export default {
    name:'App',
    components: {Category},
    data() {
      return {
        foods:['辣椒','土豆','烧烤'],
        games:['GTA5','LOL','王者荣耀'],
        films:['白雪公主','终结者','烧烤之王'],
      }
    }
  }
</script>

<style scoped>
  .container, .foot {
    display: flex;
    justify-content: space-around;
  }
</style>